<section class="contactViewDetail-container">

    <contact-action-header
        class="contactViewDetail-header"
        data-mode="mode"
        data-contact="contact"></contact-action-header>


    <div class="contactViewDetail-content">
        <div class="contactViewDetail-group" data-type="clear">
            <i
                ng-if="isSigned"
                class="fa fa-check contactViewDetail-signed-icon"
                pt-tooltip-translate="Digital signature verified"
                pt-tooltip-translate-context="Tooltip"></i>

            <contact-error></contact-error>
            <ul
                class="contactViewDetail-list"
                ng-repeat="(type, value) in model.clear track by type">

                <contact-view-item
                    data-type="{{::type}}"
                    ng-class="{'contactViewDetail-item-start': !$index}"
                    ng-repeat="info in ::value track by $id(info)"
                    class="contactViewDetail-item"></contact-view-item>
            </ul>
        </div>

        <div
            class="contactViewDetail-group"
            ng-class="{'contactViewDetail-isFree': isFree}"
            ng-if="model.hasEncrypted"
            data-type="encrypted">
            <img src="/assets/img/lock-signed.png" width="20" alt="" class="contactViewDetail-signed-icon on-ie11-only"
            pt-tooltip-translate="Encrypted data with verified digital signature"
            pt-tooltip-translate-context="Tooltip" />
            <svg
                viewBox="0 0 374.8 337.1"
                class="contactViewDetail-signed-icon not-on-ie11"
                pt-tooltip-translate="Encrypted data with verified digital signature"
                pt-tooltip-translate-context="Tooltip">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-lock-signed"></use>
            </svg>

            <div ng-if="isFree" class="contactDetails-fields-locked" >
                <div class="contactDetails-fields-locked-notice">
                    <p><a class="pm_button primary" ui-sref="secured.dashboard({ scroll: true })" translate translate-context="Action">Upgrade now</a></p>
                    <p translate translate-context="Info">This feature is only available for paid users.</p>
                </div>
            </div>

            <contact-error></contact-error>

            <ul
                class="contactViewDetail-list"
                ng-repeat="properties in model.encrypted track by $id(properties)">

                <contact-view-item
                    ng-class="{'contactViewDetail-item-start': !$index}"
                    ng-repeat="info in ::properties track by $id(info)"
                    class="contactViewDetail-item"></contact-view-item>

            </ul>
        </div>
    </div>

</section>
